<template>
  <div class="bottom_group">
    <div class="bottom_bar">
      <router-link class="bar_item index" to="/cityinfo">首页</router-link>
      <router-link class="bar_item sort" to="/cityinfo/classify">分类</router-link>
      <router-link class="bar_item" to="/cityinfo/selclass">
        <img class="release" src="../../../assets/images/cityinfo/release.png" alt="">
        发布
      </router-link>
      <router-link class="bar_item tel" to="/cityinfo/book">电话本</router-link>
      <router-link class="bar_item my" to="/cityinfo/me">我的</router-link>
    </div>
  </div>
</template>

<script>
export default{}
</script>

<style lang="scss" scoped>
.bottom_group{
  height: 53px;
  box-shadow: 0 -1px 1px 1px rgba(0,0,0,10%);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9;
  .bottom_bar{
    display: flex;
    height: 100%;
    .bar_item{
      flex: 1;
      text-align: center;
      display: block;
      color: #737373;
      font-size: 11px;
      padding: 32px 0 2px;
      position: relative;
      &.index{
        background: url(../../../assets/images/cityinfo/index.png) no-repeat center 9.5px / 16px 18px;
      }
      &.sort{
        background: url(../../../assets/images/cityinfo/sort.png) no-repeat center 9.5px / 16px 18px;
      }
      .release{
        width:45px;
        height: 45px;
        position:absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -15px;
      }
      &.tel{
        background: url(../../../assets/images/cityinfo/tel.png) no-repeat center 9.5px / 16px 18px;
      }
      &.my{
        background: url(../../../assets/images/cityinfo/my.png) no-repeat center 9.5px / 16px 18px;
      }
      &.router-link-exact-active {
        &.index{
          background: url(../../../assets/images/cityinfo/index-active.png) no-repeat center 9.5px / 16px 18px;
        }
        &.sort{
          background: url(../../../assets/images/cityinfo/sort-active.png) no-repeat center 9.5px / 16px 18px;
        }
        .release{
          width:45px;
          height: 45px;
          position:absolute;
          left: 50%;
          transform: translateX(-50%);
          top: -15px;
        }
        &.tel{
          background: url(../../../assets/images/cityinfo/tel-active.png) no-repeat center 9.5px / 16px 18px;
        }
        &.my{
          background: url(../../../assets/images/cityinfo/my-active.png) no-repeat center 9.5px / 16px 18px;
        }
      }
    }
  }
}

</style>
